﻿/**
TODO: SessionID or RoomID
Pass the session id to server..
**/

define([
   "jQuery",
	"jQuery-ui",
    "drag",
	"touchPunch",
	"finger",
	// "colorPicker",
	"dragableTouch",
	// "colorPicker",
	"html2Canvas",
	"canvas2Image",
	// "chatbox",
	"base64Img",
	// "gridBuilder",
	"printArea",
	"app/app-util",
	], function (
    $,
	$ui,
    drag, 
	stampToolbox,
	iframeTransport,
	nicEdit,
	richText,
	stickyText,
	rightClick,
	touchPunch,
	finger, 
	dragableTouch, 
	html2Canvas,
	canvas2Image, 
	base64Img, 
	printArea,
	util
	) {
	
    return {
		lastClickPointTools:{x:0,y:0},
		lastClickPoint:{x:0,y:0},
		lastClickGlobalPoint:{x:0,y:0},
		positionChange:{left:0,top:0},
		sizeChange:{width:0,height:0},
		editProp : {x :0,y:0,width:0,height:0,bgCanvas:""},
		fileId: "fileId", 
		Util : util, 
		rootCanvas : 'rootContainer',
		kineticCanvas: 'kineticCanvas',
		stampToolbox : stampToolbox,
		kineticExporterCanvas : 'kineticExporterCanvas',
		dragMode: true,
		activeObject : false,
		isDrag:false,
		lastUpdateTime:0,
		prepareCreation:false,
		creationMode:false,
		creationKind: false,//'shape',//shape,text,stamp
		creationType:'pencil',
		creationStartPoint: {x:0,y:0},
		creationObject: null,
		pollInterval: 25000000,
		openedTool: false,
		option : false,
		heightChartDraw : 0,
		widthChartDraw : 0,
		listFileLayersCount : 0,
		tempPageId : false, 
		openWindowPreview : 1, 
		initialWidth : 0,
		chatboxContainer:null,
		isUpdate : 0,
		lastZ : 20,
		idIndicatorLast : 0,
		idPageSelcLast : 0,
		isPrintPage : 0,
		pageIdData : [],
		pages : new Array(),
		printObject:0,
		contentGlobal:false,
		lastIdx:[],
		objectPage:[],
		baseUrl:document.getElementById("base_url").value,
		fileId:document.getElementById("file_id").value,
		pageId:document.getElementById("page_id").value,
		username:document.getElementById("u_name").value,

        init: function () {  
			App.pageIdPrint();  
			initialWidth = $(window).width();
			 if(App.isTemplate == 0)
			 	App.isTemplate = false
			 else
				App.isTemplate=true; 
			$(function () {
				$('#select-print-button').click(
					function() {
						$('.tf').attr('checked', 'checked');
						var sizeCheck = App.pageIdData.length; 
						console.log(App.objectPage);
						$('.DocView').children().remove();
						$('.DocView').css('display','block');
						for(countData = 0; countData < sizeCheck; countData++){ 
							var pageContainer = $('<div></div>').attr({"id":"pageContainer-"+App.pageIdData[countData] , class:"page"}) ;
							
							var rootContainer = $('<div></div>').attr({"id":"rootContainer-"+App.pageIdData[countData], class:"imagePreview page-break subpage"}) ;
							rootContainer.css('position', 'relative'); 
							rootContainer.css('border', '2px solid yellow'); 
							rootContainer.css('background-image', 'url(' + App.baseUrl+'documents/background-blank.png)');
							rootContainer.css('background-size', '100%'); 
							rootContainer.css('display', 'block'); 
							var imgPrint = $('<img></img>').attr({id:"img_"+countData, class:"", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[countData]+'.png'}); 
							imgPrint.appendTo(rootContainer); 
							imgPrint.attr('width','100%');
								imgPrint.attr('height','100%');
								
								imgPrint.css('width','100%');
								imgPrint.css('height','100%');
								
								//for big size(new paper version, don't deleted)
								if(parseInt(App.objectPage.pages[countData].width) > 3168 && parseInt(App.objectPage.pages[countData].width) < 3188){		
									imgPrint.addClass("preview-page1");
									if($.browser.msie){ 
										rootContainer.css('width',5200);
										rootContainer.css('height',3650); 
									}
									else{
										rootContainer.css('width',App.objectPage.pages[countData].width);
										rootContainer.css('height',2200); 
									}
								}else if(parseInt(App.objectPage.pages[countData].width) > 2235 && parseInt(App.objectPage.pages[countData].width) < 2255){ 
									imgPrint.addClass("preview-page2"); 
									if($.browser.msie){  
										rootContainer.css('width',3650);
										rootContainer.css('height',2550); 
									}
									else{
										rootContainer.css('width',App.objectPage.pages[countData].width);
										rootContainer.css('height',1560); 
									}
								}else if(parseInt(App.objectPage.pages[countData].width) > 1577 && parseInt(App.objectPage.pages[countData].width) < 1597){ 
									imgPrint.addClass("preview-page3"); 
									if($.browser.msie){  
										rootContainer.css('width',2550);
										rootContainer.css('height',1780); 
									}
									else if($.browser.chrome){ 
										rootContainer.css('width',1550);
										rootContainer.css('height',1060); 
									}
									else{ 
										rootContainer.css('width',App.objectPage.pages[countData].width);
										rootContainer.css('height',1080); 
									}
								}else if(parseInt(App.objectPage.pages[countData].width) > 1112 && parseInt(App.objectPage.pages[countData].width) < 1132){ 
									imgPrint.addClass("preview-page4"); 
									if($.browser.msie){  
										rootContainer.css('width',1780);
										rootContainer.css('height',1230); 
									}
									else if($.browser.chrome){
										rootContainer.css('width',1050);
										rootContainer.css('height',710); 
									}
									else{
										rootContainer.css('width',App.objectPage.pages[countData].width);
										rootContainer.css('height',760); 
									}
								}else if(parseInt(App.objectPage.pages[countData].width) > 783 && parseInt(App.objectPage.pages[countData].width) < 803){ 
									rootContainer.addClass("preview-page5");  
									if($.browser.msie){  
										rootContainer.css('width',710); 
										rootContainer.css('height',470); 
									}
									else if($.browser.chrome){
										rootContainer.css('width',710);
										rootContainer.css('height',470); 
									}
									else{
										rootContainer.css('width',App.objectPage.pages[countData].width);
										rootContainer.css('height',520); 
									}
								} 	
							if($.browser.msie){
								rootContainer.css('display', 'block'); 
								rootContainer.appendTo(pageContainer);
								pageContainer.appendTo($('.DocView'));
							}
							else{
								rootContainer.appendTo($('.DocView'));
							}
						}
					} 
				);
			});	
			$(function () {
				$('#des-print-button').click(function () {
					$('.tf').removeAttr('checked');
					$('.DocView').children().remove();
					$('.DocViewHide').children().remove();
				});
			});
			$(function () {
				$('#print-button').click(function () {  
					
					if($.browser.msie){ 
						$('.DocView').printArea();
					}else{
						window.print();
					} 
					
				});
			});	
			$(function () {
				$('#cancel-button').click(function () { 
					window.close();
				});
			});	
			
			 
			 
                                         
		},
		toggle_visibility:function(id){
		console.log("toggle");
		console.log($('#'+id));
			$('#'+id).toggle();
		},  
		
		 
		
		loadTextObject:function(data){ 
			
			var style = ""; 
			var color = "";
			if(data.object_type == "buble"){
				if(data.kind){
					if(data.kind == "bubble1"){
						style = 'class="triangle-border"';
					}else if(data.kind == "bubble2"){
						style = 'class="triangle-border right"';
					}else if(data.kind == "bubble3"){
						style = 'class="triangle-border top"';
					}else if(data.kind == "bubble4"){
						style = 'class="triangle-border left"';
					}else if(data.kind == "bubble5"){
						style = 'class="triangle-border right"';
					}else{
						style = 'class="triangle-border"';
					}
				}else{
					style = 'class="triangle-border"';
				}
			}else if(data.object_type == "sticky-text"){
				style = 'class="sticky taped"';
				color = '#F4F39E';
				if(data.kind){
					if(data.kind == "sticky2"){
						color = '#d6f0fa';
					}else if(data.kind == "sticky3"){
						color = '#f5d1f5';
					}else if(data.kind == "sticky4"){
						color = '#cffdc9';
					}else if(data.kind == "sticky5"){
						color = '#d5cdfe';
					}
				}
			}
			var newTextObject =  $('<div ' + style + '></div>')
									.attr("id",data.id)
									.attr("object_type",data.object_type)
									.addClass("nic-edit-element")
									.css("overflow","visible")
									.css("z-index","18")
									.attr("kind",data.kind); 
									
			if(data.object_type == "sticky-text")
			{
				newTextObject.css("background-color",color);
			}
			newTextObject.css("left",(parseInt(data.posx)));
			newTextObject.css("top",(parseInt(data.posy)));
			newTextObject.css("height",parseInt(data.height));
			newTextObject.css("width",parseInt(data.width));
			newTextObject.css("overflow","visible");
			
			newTextObject.html("<div id='text_content_"+data.id+"' style='overflow:hidden;width:100%;height:100%;'>" + data.content + "</div>");
			$("#"+data.id).css("position", "");
			 
			if(App.printObject == 0){ 
				newTextObject.appendTo($('#rootPrintContainer'));
			}else{ 
				return newTextObject;
			}
		},
		
		loadStickyTextObject:function(data){
			var newStickyTextObject =  $('<div></div>')
									.attr("id",data.id)
									.attr("object_type",data.object_type)
									.addClass("nic-sticky-edit-element");//.appendTo($('#rootPrintContainer'));
 
			newStickyTextObject.css("left",(parseInt(data.posx)));
			newStickyTextObject.css("top",(parseInt(data.posy)));
			newStickyTextObject.css("height",parseInt(data.height));
			newStickyTextObject.css("width",parseInt(data.width));
			newStickyTextObject.css("background",data.background);
			newStickyTextObject.css("overflow","visible");
			newStickyTextObject.html("<div id='text_content_"+data.id+"' style='overflow:hidden;width:100%;height:100%;'>" + data.content + "</div>");
			$("#"+data.id).css("position", "");
			
			if(App.printObject == 0){
				newStickyTextObject.appendTo($('#rootPrintContainer'));
			}else{
				return newStickyTextObject;
			}
		
			  
		},
		
		disableclick:function(e){
			// alert(e.button);
			if(e.button==2)
			{
				// alert(status);
				return false;    
			}
		},
		
	
		 	
			
		loadDrawingObject : function(data){  
			var newImgContainer = $('<div></div>').attr({'id':data.id,'class':'image', 'type':data.type, 'object_type':data.type, 'created_by':data.created_by, 'created_date':data.created_date}).appendTo($('#rootPrintContainer')); 
			newImgContainer.css("position","absolute");
			newImgContainer.css("left",(parseInt(data.posx)));
			newImgContainer.css("top",(parseInt(data.posy)));
			newImgContainer.css("height",parseInt(data.height));
			newImgContainer.css("width",parseInt(data.width));
			newImgContainer.css("overflow","visible");
		
			var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id}).appendTo(newImgContainer);
			newImgComponent.attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id}); 

		   
		},
		
		loadTableObject:function(data){
			var newTableContainer = $('<div></div>').attr({'id':data.id,'class':'table','type':data.type, 'object_type':data.object_type}).appendTo($('#rootPrintContainer'));
 
			newTableContainer.css("position","absolute");
			newTableContainer.css("left",(parseInt(data.posx)));
			newTableContainer.css("top",(parseInt(data.posy)));
			newTableContainer.css("height", (parseInt(data.height)));
			newTableContainer.css("width", (parseInt(data.width)));
			newTableContainer.css("overflow","visible");
			
			newTableContainer.css("cursor", 'default');
			newTableContainer.css("border", '1px solid rgb(160, 160, 164)'); 
			
			var tableConteiner = $('<table></table>').attr({ id: "tbl_"+data.id, border:"2px", width:"100%", height:"100%"}).html(data.content_table).appendTo(newTableContainer);
			 
			 
		},
		
		loadChartObject : function(data){
		
			var newChartContainer = $('<div></div>').attr({'id':data.id,'class':'image','type':data.type, 'object_type':data.object_type, 'chart-data':data.data_chart}); 
			newChartContainer.css("position","absolute");
			newChartContainer.css("left",(parseInt(data.posx)));
			newChartContainer.css("top",(parseInt(data.posy)));
			newChartContainer.css("height",parseInt(data.height));
			newChartContainer.css("width",parseInt(data.width));
			newChartContainer.css("overflow","visible");
			var newChartImgContainer = $('<img></img>').attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id}).appendTo(newChartContainer);
			
			if(App.printObject == 0){
				newChartContainer.appendTo($('#rootPrintContainer'));
			}else{
				return newChartContainer;
			}  
			 
		}, 
		
		prepareTextCreation: function(creation){
			App.prepareCreation = creation;
			App.creationKind = "text";
			App.creationType = "text";
		},
		
		prepareBubleTextCreation: function(creation){
			App.prepareCreation = creation;
			App.creationKind = "buble";
			App.creationType = "buble";
		},
		
		prepareStickyTextCreation: function(creation){
			App.prepareCreation = creation;
			App.creationKind = "sticky-text";
			App.creationType = "";
		},
		
		setEnableKineticCreationMode: function(creation,shouldSave){
			App.creationMode = creation;
			if(App.creationMode){
				document.getElementById(App.rootCanvas).style.display = "none";
				document.getElementById(App.kineticCanvas).style.display = "block";
				App.kinetic.setStageSize({width:970,height:600});
				$("#" + App.kineticCanvas).css({"border":"1px solid black","width":"970","height":"600"});
				$("#" + App.kineticCanvas).offset({top:110,left:130});
				App.kinetic.enterCreationMode();
				
			}else{
				document.getElementById(App.rootCanvas).style.display = "block";
				document.getElementById(App.kineticCanvas).style.display = "none";
				App.kinetic.endCreationMode(shouldSave);
			}
		},
		
		setEnableKineticEditCreationMode: function(creation,shouldSave){
			console.log("Enable Kinetic Mode For Edit");
			App.creationMode = creation;
			if(App.creationMode){
				App.activeObject.hide();
				App.kinetic.enterCreationMode();
				//document.getElementById(App.rootCanvas).style.display = "none";
				document.getElementById(App.kineticCanvas).style.display = "block";
				App.kinetic.setStageSize({width:App.editProp.width,height:App.editProp.height});
				// alert(App.editProp.bgCanvas);
				App.kinetic.setBGCanvas(App.editProp.bgCanvas,{width:App.editProp.width,height:App.editProp.height});
				$("#" + App.kineticCanvas).css({"border":"3px solid red","width":App.editProp.width,"height":App.editProp.height});
				$("#" + App.kineticCanvas).offset({top:App.editProp.y,left:App.editProp.x});
			}else{
				if(shouldSave)
					App.activeObject.remove();
				else
					App.activeObject.show();
				//document.getElementById(App.rootCanvas).style.display = "block";
				document.getElementById(App.kineticCanvas).style.display = "none";
				App.kinetic.endCreationMode(shouldSave);
			}
		},
		
		setEnableStampCreationMode: function(creation,stampImage){
			App.creationMode = creation;
			if(App.creationMode)
				App.setCreationObject("stamp",stampImage);
			
		},
		
		setCreationObject : function(kind,type){
			App.creationKind = kind;
			App.creationType = type;
			console.log("Enter Creation : " + kind + " - " + type);
		},
				
		setEnableImageCreationMode: function(creation){
			App.creationMode = creation;
			if(App.creationMode)
				App.setCreationObject("image");
		},
		
		setEnableFileCreationMode: function(creation){
			App.creationMode = creation;
			if(App.creationMode)
				App.setCreationObject("file");
		},
		
		setEnableChartCreationMode: function(creation){
			App.creationMode = creation;
			if(App.creationMode)
				App.setCreationObject("chart");
		},
		
		setEnableTableCreationMode: function(creation){
			App.creationMode = creation;
			if(App.creationMode)
				App.setCreationObject("table");
		},
		
		setEnableTextLogoCreationMode: function(creation){
			App.creationMode = creation;
			if(App.creationMode)
				App.setCreationObject("text-logo");
		},
		
		touchStartCanvas: function(){
			
		},
		
		touchMoveCanvas: function(){
			
		},
		
		touchEndCanvas: function(){
			
		},
		
		 
		
		pickColor:function(id){
			App.pickColorToolbox.show();
		},
		
		pickColorSelected:function(){			
			// console.log(App.pickColorToolbox.color);
			var hex = App.pickColorToolbox.color;
			if(hex.charAt(0) == "#") hex = hex.slice(1); //Remove the '#' char - if there is one.
			hex = hex.toUpperCase();
			var hex_alphabets = "0123456789ABCDEF";
			var value = new Array(3);
			var k = 0;
			var int1,int2;
			for(var i=0;i<6;i+=2) {
				int1 = hex_alphabets.indexOf(hex.charAt(i));
				int2 = hex_alphabets.indexOf(hex.charAt(i+1)); 
				value[k] = (int1 * 16) + int2;
				k++;
			}
			console.log(value[0]);
		},
		
		 
		
		bringToFront:function(){
			if(App.activeObject)
			{
				App.activeObject.css({"z-index":parseInt(App.lastZ) + 1});
				App.lastZ++;
			}
			
		},
		
		sendToBack:function(){
			if(App.activeObject)
			{
				App.activeObject.css({"z-index":"10"});
			}	
		},
		
		 
							
		showLoading:function(){ 
					
		},
		
		hideLoading:function(){ 
		},
		
		 
						
		colorPickerSelected:function(){
			$('.jPicker').jPicker(
			{
			  window:
			  {
				expandable: true
			  }
			});
		},
		
		htmlToImage:function(currPageId){ 
			html2canvas(document.getElementById('rootContainer'), {
				onrendered: function(canvas) { 
					var dataImg = Canvas2Image.convertToPNG(canvas, 80, 60);
					var dataURL = dataImg.src; 
					var newImagePath = "documents/"+App.fileId+"/thumb-"+currPageId+".png";
					
					var url = App.baseUrl+"CommHub/add_thumb_canvas";
					var allData = {"file_id": App.fileId,
									"page_id": currPageId,
									"filepath" : newImagePath,
									"image_data": dataURL
								};
					var request = $.ajax({ //get data awal
									url: url,
									type: "POST",
									data: allData,
								});
					
					request.done(function(msg) {   
						var existingObject=false;	//check if it's an existing object
							$('.layerboxContainer').children().each(function(){
								if($(this).attr('id') == "page_"+currPageId)
								{
									existingObject=$(this);
								}
							});
							if(existingObject)
							{ 
								 $("#page"+currPageId).attr('src',(App.baseUrl+newImagePath+"?dum="+(new Date).getTime())); 
							} 
					});
					request.fail(function(jqXHR, textStatus) { 
					});
					request.always(function(){
					});
				}
			}); 
		},
				
		   
		
		printWorkspaces:function(){
			var my_window = false;
			my_window = window.open(App.baseUrl+"home/draw_preview?f_id="+App.fileId, "DigitalBoard", "status=1,width=250,height=160");
			
		},
		
		pageIdPrint:function(){ 
			var url = App.baseUrl+"CommHub/get_file_data";
			var allData = {"file_id": App.fileId}
			
			var request = $.ajax({ //get data awal
				url: url,
				type: "POST",
				data: allData,
			});
			request.done(function(msg) { 
				var jsonObject = JSON.parse(msg); 
				var contentObject = JSON.parse(jsonObject.content);  
				App.objectPage = JSON.parse(jsonObject.content);  
				App.lastUpdateTime=jsonObject.last_update;
				var objectArray=[];
				var printPage = 0;
				App.htmlToImagePrintRecurse(contentObject,0);  
				
				
			});
			request.fail(function(jqXHR, textStatus) {
			});
			request.always(function(){
			});
		},
		htmlToImagePrintRecurse:function(contentObject,pageIndex){ 
				if(pageIndex >= contentObject.pages.length)
				{ 
					$("#overlay").hide();
					App.loadDataPrintTable(contentObject);
					return;
				}
				
				indexKe = pageIndex + 1;
				App.pageIdData.push(indexKe);
				$('#rootPrintContainer').children().remove(); 
				$('#rootPrintContainer').width(contentObject.pages[pageIndex].width);
				$('#rootPrintContainer').height(contentObject.pages[pageIndex].height);
				for(var objectIndex=0;objectIndex<contentObject.pages[pageIndex].drawing_objects.length;objectIndex++)
				{ 
			
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="image"){ 
						App.loadDrawingObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="attach"){
						App.loadDrawingObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="text" || 
						(contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="buble"){ 
						App.loadTextObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="chart"){ 
						App.loadChartObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="sticky-text"){
						App.loadStickyTextObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="table"){
						App.loadTableObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					} 
				}   
				
				html2canvas(document.getElementById('rootPrintContainer'), { 
					onrendered: function(canvas) {  
						// var dataImg = Canvas2Image.convertToPNG(canvas, 940, 640);
						var dataImg = Canvas2Image.convertToPNG(canvas, contentObject.pages[pageIndex].width , contentObject.pages[pageIndex].height); 
						var dataURL = dataImg.src; 
						var indexPage = pageIndex + 1;
						var newImagePath = "documents/"+App.fileId+"/print-"+indexPage+".png"; 
						var url = App.baseUrl+"CommHub/add_thumb_canvas";
						var allData = {"file_id": App.fileId,
										"page_id": pageIndex,
										"filepath" : newImagePath,
										"image_data": dataURL
									};
						var request = $.ajax({ //get data awal
										url: url,
										type: "POST",
										data: allData,
									});
						
						request.done(function(msg) {   
							var existingObject=false;	//check if it's an existing object 
							pageIndex+=1;
							App.htmlToImagePrintRecurse(contentObject,pageIndex);
						});
						request.fail(function(jqXHR, textStatus) {  
						});
						request.always(function(){
						});
					}
				});
		
		},
		
		loadDataPrintTable:function(contentObject){   
			$('#rootPrintContainer').hide(); 
			var sizeData = App.pageIdData.length; 
			var trSize = 1;
			var dataKe = 1;
			var tr = [];
			var row = $('<tr></tr>').attr({ id: 'pageList'+trSize+'_trID' }).appendTo($('#pageList'));
			for (var i = 0; i < sizeData; i++) {
				console.log(i);
				if( trSize > 5){ 
					trSize = 1;
					var row = $('<tr></tr>').attr({ id: 'pageList'+trSize+'_trID' }).appendTo($('#pageList'));
				} 
				var column = $('<td style="text-align:center"></td>').appendTo(row);  
				$('<img></img>').attr({ src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[i]+'.png'}).css({height:'80px'}).appendTo(column);  
				var checkbutton = $('<input></input>').attr({type:'checkbox', id:'checkbox_'+i, class:'tf'}).css({height:'80px'}).appendTo(column); 
				
				checkbutton.on('tap',function(e){ 
				var indexKe = parseInt($(this).attr("id").substring(9)); 
						 
						if(!$(this).is(":checked")) { 
							var indexFind = indexKe + 1;
							App.lastIdx.push(indexFind);
							console.log(App.lastIdx);
							var pageContainer = $('<div></div>').attr({"id":"pageContainer-"+App.pageIdData[indexKe] , class:"page"}) ;
							 
							var rootContainer = $('<div></div>').attr({"id":"rootContainer-"+App.pageIdData[indexKe], class:"imagePreview page-break subpage"}) ;
							rootContainer.css('background-image', 'url(' + App.baseUrl+'documents/background-blank.png)');
							rootContainer.css('background-size', '100%'); 
							// rootContainer.css('margin', 'auto'); 
							rootContainer.css('position', 'relative'); 
							rootContainer.css('border', '2px solid yellow');    
							
							
												
							 
							if($('.DocViewHide').find($('#pageContainer-'+indexFind)).attr('id') != "pageContainer-"+App.pageIdData[indexKe])
							{	
								
								// if(!$.browser.msie){ 
									// rootContainer.attr('width',contentObject.pages[indexKe].width);
									// rootContainer.attr('height',contentObject.pages[indexKe].height);
									
									// rootContainer.css('width',contentObject.pages[indexKe].width);
									// rootContainer.css('height',contentObject.pages[indexKe].height);
								// }
								var imgPrint = $('<img></img>').attr({id:"img_"+indexKe, class:"", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[indexKe]+'.png'});  
								
								imgPrint.attr('width','100%');
								imgPrint.attr('height','100%');
								
								imgPrint.css('width','100%');
								imgPrint.css('height','100%');
								
								//for big size(new paper version, don't deleted)
								if(parseInt(contentObject.pages[indexKe].width) > 3168 && parseInt(contentObject.pages[indexKe].width) < 3188){		
									imgPrint.addClass("preview-page1");
									if($.browser.msie){ 
										rootContainer.css('width',5200);
										rootContainer.css('height',3650); 
									}
									else{
										rootContainer.css('width',contentObject.pages[indexKe].width);
										rootContainer.css('height',2200); 
									}
								}else if(parseInt(contentObject.pages[indexKe].width) > 2235 && parseInt(contentObject.pages[indexKe].width) < 2255){ 
									imgPrint.addClass("preview-page2"); 
									if($.browser.msie){  
										rootContainer.css('width',3650);
										rootContainer.css('height',2550); 
									}
									else{
										rootContainer.css('width',contentObject.pages[indexKe].width);
										rootContainer.css('height',1560); 
									}
								}else if(parseInt(contentObject.pages[indexKe].width) > 1577 && parseInt(contentObject.pages[indexKe].width) < 1597){ 
									imgPrint.addClass("preview-page3"); 
									if($.browser.msie){  
										rootContainer.css('width',2550);
										rootContainer.css('height',1780); 
									}
									else if($.browser.chrome){
										rootContainer.css('width',1550);
										rootContainer.css('height',1060); 
									}
									else{
										rootContainer.css('width',contentObject.pages[indexKe].width);
										rootContainer.css('height',1080); 
									}
								}else if(parseInt(contentObject.pages[indexKe].width) > 1112 && parseInt(contentObject.pages[indexKe].width) < 1132){ 
									imgPrint.addClass("preview-page4"); 
									if($.browser.msie){  
										rootContainer.css('width',1780);
										rootContainer.css('height',1230); 
									}
									else if($.browser.chrome){
										rootContainer.css('width',1050);
										rootContainer.css('height',710); 
									}
									else{
										rootContainer.css('width',contentObject.pages[indexKe].width);
										rootContainer.css('height',760); 
									}
								}else if(parseInt(contentObject.pages[indexKe].width) > 783 && parseInt(contentObject.pages[indexKe].width) < 803){ 
									rootContainer.addClass("preview-page5"); 
									if($.browser.msie){  
										rootContainer.css('width',710); 
										rootContainer.css('height',470); 
									}
									else if($.browser.chrome){
										rootContainer.css('width',710);
										rootContainer.css('height',470); 
									}
									else{
										rootContainer.css('width',contentObject.pages[indexKe].width);
										rootContainer.css('height',520); 
									}
								} 	
								imgPrint.appendTo(rootContainer);
								 
								if($.browser.msie){
									rootContainer.css('display', 'block'); 
									rootContainer.appendTo(pageContainer);
									pageContainer.appendTo($('.DocView'));
								}
								else{
									rootContainer.appendTo($('.DocView'));
								}
								 
							} 				
							
						}else{  
							 
							var indexTo = 0;
							indexTo = indexKe + 1;
							var viewIndx = i - 2;   
							
							var alreadyIndex = false;
							var checkIdx = -1;
							for(var indexLast = 0;App.lastIdx.length;indexLast++){
								if(App.lastIdx[indexLast] == indexTo){
									checkIdx = indexLast;
									alreadyIndex = true;
									break;
								}
							}
							
							if(alreadyIndex){  
								var deleteObjIdx = App.lastIdx[checkIdx];
								if(!$.browser.msie){
									$('.DocViewHide').find($('#rootContainer-'+deleteObjIdx)).remove();
									$('.DocViewHide').find($('#rootContainer-'+indexTo)).remove();
									$('.DocView').find($('#rootContainer-'+App.lastIdx[checkIdx])).remove();
									App.lastIdx.splice(checkIdx,1); 
									$('.DocViewHide').find($('#rootContainer-'+deleteObjIdx)).remove();
									var cloneViewObject = $('.DocViewHide').find($('#rootContainer-'+App.lastIdx[App.lastIdx.length-1])).clone();
									$('.DocViewHide').find($('#rootContainer-'+App.lastIdx[App.lastIdx.length-1])).css("display","block");
									cloneViewObject.appendTo($('.DocView'));
								}
								else{
									$('.DocViewHide').find($('#pageContainer-'+deleteObjIdx)).remove();
									$('.DocViewHide').find($('#pageContainer-'+indexTo)).remove();
									$('.DocView').find($('#pageContainer-'+App.lastIdx[checkIdx])).remove();
									App.lastIdx.splice(checkIdx,1); 
									$('.DocViewHide').find($('#pageContainer-'+deleteObjIdx)).remove();
									var cloneViewObject = $('.DocViewHide').find($('#pageContainer-'+App.lastIdx[App.lastIdx.length-1])).clone();
									$('.DocViewHide').find($('#pageContainer-'+App.lastIdx[App.lastIdx.length-1])).css("display","block");
									cloneViewObject.appendTo($('.DocView'));
								}
							} 
						}  
			});
				trSize = trSize + 1; 
			}
		}
		,
		
		generateHTML:function(strHtml){ 
			var filLoc 	= "documents/print_html.php";
			var url 	= App.baseUrl+"index.php/CommHub/generate_file_html"; 
			console.log(filLoc);
			console.log(url);
			console.log(strHtml);
			var allData = {
							"fil_loc": filLoc,
							"str_html": strHtml 
						};
			var request = $.ajax({ //get data awal
							url: url,
							type: "POST",
							data: allData,
						});
			
			request.done(function(msg) {  
			});
			request.fail(function(jqXHR, textStatus) {  
			});
			request.always(function(){
			});
		}
	}
});